<template>
  <div class="messages-view">
    <div class="header-section">
      <h3>系统消息</h3>
      <div class="actions">
        <button class="action-btn mark-all-read" @click="markAllAsRead">
          全部标记为已读
        </button>
      </div>
    </div>

    <div class="messages-list">
      <div
          v-for="(message, index) in filteredMessages"
          :key="index"
          :class="['message-item', { unread: !message.read }]"
      >
        <div class="message-header">
          <div class="message-title">
            <span class="message-icon">📢</span>
            <strong>{{ message.title }}</strong>
          </div>
          <div class="message-time">{{ formatDate(message.time) }}</div>
        </div>
        <div class="message-content">{{ message.content }}</div>
        <div class="message-actions">
          <button
              v-if="!message.read"
              class="action-btn read-btn"
              @click="markAsRead(index)"
          >
            标记为已读
          </button>
          <button
              class="action-btn delete-btn"
              @click="deleteMessage(index)"
          >
            删除
          </button>
        </div>
      </div>
    </div>

    <div v-if="filteredMessages.length === 0" class="no-messages">
      <p>暂无消息</p>
    </div>
  </div>



  <!-- 添加确认删除对话框 -->
  <div v-if="showDeleteConfirm" class="confirm-dialog-overlay">
    <div class="confirm-dialog">
      <h3>确认删除</h3>
      <p>确定要删除这条消息吗？删除后无法恢复。</p>
      <div class="dialog-buttons">
        <button class="cancel-btn" @click="cancelDelete">取消</button>
        <button class="confirm-btn" @click="confirmDelete">确认</button>
      </div>
    </div>
  </div>


</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
const showDeleteConfirm = ref(false);
const deleteIndex = ref(-1); // 存储待删除消息的索引

interface Message {
  id: number;
  title: string;
  content: string;
  time: string;
  read: boolean;
  type: 'system' | 'notification';
}

// 示例消息数据
const messages = ref<Message[]>([
  {
    id: 1,
    title: '监考安排通知',
    content: '您已被安排参加2023年12月英语四级考试的监考工作，请及时查看详情。',
    time: '2023-11-15T10:30:00',
    read: false,
    type: 'system'
  },
  {
    id: 2,
    title: '报名成功通知',
    content: '您已成功报名2023年12月英语六级考试监考，考场号：三教202。',
    time: '2023-11-10T14:15:00',
    read: true,
    type: 'notification'
  },
  {
    id: 3,
    title: '系统维护通知',
    content: '系统将于本周六凌晨2:00-4:00进行维护升级，期间服务将不可用。',
    time: '2023-11-05T09:00:00',
    read: false,
    type: 'system'
  }
]);

// 过滤消息（可根据需求扩展）
const filteredMessages = computed(() => {
  return messages.value;
});

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};

// 标记为已读
const markAsRead = (index: number) => {
  messages.value[index].read = true;
};

// 标记全部为已读
const markAllAsRead = () => {
  messages.value.forEach(msg => msg.read = true);
};

// 修改删除消息函数
const deleteMessage = (index: number) => {
  deleteIndex.value = index;
  showDeleteConfirm.value = true;
};
// 添加确认删除函数
const confirmDelete = () => {
  if (deleteIndex.value >= 0) {
    messages.value.splice(deleteIndex.value, 1);
  }
  showDeleteConfirm.value = false;
};

// 添加取消删除函数
const cancelDelete = () => {
  showDeleteConfirm.value = false;
};
</script>

<style scoped>
.messages-view {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 25px;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e8f0;
}

.header-section h3 {
  margin: 0;
  color: #1a2b4b;
  font-size: 18px;
}

.actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 8px 15px;
  background-color: #f0f2f5;
  border: none;
  border-radius: 4px;
  color: #1a2b4b;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.action-btn:hover {
  background-color: #e2e8f0;
}

.mark-all-read {
  background-color: #1a3a6c;
  color: white;
}

.mark-all-read:hover {
  background-color: #2c5282;
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message-item {
  background-color: #f8fafc;
  border-radius: 6px;
  padding: 15px;
  border-left: 3px solid #1a3a6c;
}

.message-item.unread {
  background-color: #ebf4ff;
  border-left: 3px solid #2c5282;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.message-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.message-icon {
  font-size: 18px;
}

.message-time {
  color: #666;
  font-size: 13px;
}

.message-content {
  color: #4a5568;
  line-height: 1.5;
  margin-bottom: 10px;
}

.message-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.read-btn {
  background-color: #1a3a6c;
  color: white;
}

.read-btn:hover {
  background-color: #2c5282;
}

.delete-btn {
  background-color: #f8fafc;
  border: 1px solid #e53e3e;
  color: #e53e3e;
}

.delete-btn:hover {
  background-color: #feb2b2;
}

.no-messages {
  text-align: center;
  padding: 40px 0;
  color: #718096;
}

/* 确认对话框样式 */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-dialog {
  width: 400px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 25px;
  text-align: center;
}

.confirm-dialog h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #1a2b4b;
  font-size: 20px;
}

.confirm-dialog p {
  margin-bottom: 25px;
  color: #4a5568;
  font-size: 16px;
}

.dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.dialog-buttons button {
  padding: 10px 25px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn {
  background-color: #f0f2f5;
  color: #1a2b4b;
}

.cancel-btn:hover {
  background-color: #e2e8f0;
}

.confirm-btn {
  background-color: #c53030;
  color: white;
}

.confirm-btn:hover {
  background-color: #e53e3e;
}

</style>